<template>
	<view class="vip-ctn h100 bg-ctn column hidden relative">
		<view class="absolute center" style="top: 44rpx; left: 10rpx; width: 50rpx; height: 50rpx; z-index: 999"
			@click="navBack">
			<u-icon name="arrow-left" color="#eeeeee" size="30rpx"></u-icon>
		</view>
		<scroll-view scroll-y class="flex-1 hidden w-calc-30">
			<view class="top">
				<view class="left">
					<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/title-text.png" width="212rpx"
						height="98.17rpx">
						<template v-slot:loading>
							<u-loading-icon color="#3B84F3"></u-loading-icon>
						</template>
					</u-image>
				</view>
				<view class="right">
					<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/crown.png" width="220rpx"
						height="220rpx">
						<template v-slot:loading>
							<u-loading-icon color="#3B84F3"></u-loading-icon>
						</template>
					</u-image>
					<view class="invite" @click="showInvite = true">邀请码</view>
				</view>
			</view>
			<view class="vip-proj">
				<view :class="['vip-proj__item', index === current && 'item-active']" v-for="(item, index) in vips"
					:key="item.id" @click="onTabSwitch(index)">
					<view class="name">{{ item.title }}</view>
					<view class="price">
						<text class="flag">￥</text>
						<text>{{ item.price }}</text>
					</view>
					<view class="origin">原价:￥{{ item.yprice }}</view>
					<view :class="['vip-proj__flag', index === current && 'vip-proj__flag-act']">
						仅需
						<text class="num">{{ item.discount }}</text>
						元/月
					</view>
				</view>
			</view>
			<view class="vip-ctt w100 column"></view>
		</scroll-view>
		<view class="fixed-bottom mt20">
			<view class="agree">
				<u-checkbox v-model:checked="checked" shape="circle" activeColor="#f26631" usedAlone></u-checkbox>
				<text class="gray">我已阅读并同意</text>
				<text class="privacy" @click="navTo('pages/article/index', { code: 'hyxy' })">《佰榕尊享会员协议》</text>
			</view>
			<view class="price">
				<view class="left">
					<view class="justify-start align-end">
						<text class="flag">￥</text>
						<text class="num">{{ vips[current]?.price }}</text>
					</view>
					<text class="unit">/年</text>
					<text class="origin">¥{{ vips[current]?.yprice }}</text>
				</view>
				<view class="right" @click="payNow">立即开通</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<view class="">
			<u-popup :show="showInvite" mode="center" round="20rpx" @close="showInvite = false">
				<view class="invite-pop">
					<view class="title">输入邀请码</view>
					<view class="input-ref">
						<input v-model="invite" placeholder="请输入" placeholder-class="holder" type="text" />
					</view>
					<view class="buts">
						<u-button color="#F3F3F3"
							:customStyle="{ fontSize: '30rpx', fontWeight: 'bold', color: '#121212', borderRadius: '15rpx' }"
							@click="showInvite=false">
							取消
						</u-button>
						<u-button type="primary"
							:customStyle="{ fontSize: '30rpx', fontWeight: 'bold', borderRadius: '15rpx' }">确认</u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		showSuccess,
		navBack,
		showToast,
		navTo,
		checkLogin,
		showModel
	} from '@/core/app';
	import storage from '@/utils/storage';
	onLoad((options) => {});

	/* Vip特权控制 */
	const curInfo = ref({});
	const showVip = ref(false);

	const isIos = ref(false);

	function judgeIos() {
		const systemInfo = uni.getSystemInfoSync();
		isIos.value = systemInfo.platform === 'ios';
	}

	/* 获取用户信息 */
	const userInfo = ref({});

	function getUserInfoData() {
		if (!checkLogin()) return;
		const userinfo = storage.get('brcf_userinfo');
		if (!userinfo) {
			getUserInfo().then((res) => {
				userInfo.value = res.data;
			});
		} else {
			userInfo.value = userinfo;
		}
	}

	/* 获取支付信息并吊起微信支付 */
	const orderId = ref('');

	function getPayInfo() {
		const data = {
			levelId: vips.value[current.value].id,
			amount: vips.value[current.value].price
		};
	}

	function payNow() {
		if (!checked.value) {
			showToast('请先同意协议');
			return;
		}
	}

	/* 获取VIP列表 */
	const vips = ref([{
			id: 1,
			title: '12个月',
			price: 399,
			yprice: 199,
			discount: 50
		},
		{
			id: 1,
			title: '12个月',
			price: 299,
			yprice: 199,
			discount: 50
		}
	]);
	const wgafawfawf = ref(false);

	function getVipList() {
		vipList().then((res) => {
			vips.value = res.data;
			nextTick(() => {
				wgafawfawf.value = true;
			});
			onTabSwitch(0);
		});
	}

	/* 邀请码 */
	const showInvite = ref(false);
	const invite = ref('');

	/* 缓存当前Vip */
	const current = ref(0);
	const privilege = ref({
		typeList: []
	});

	function onTabSwitch(index) {
		current.value = index;
		privilege.value = vips.value[index];
	}

	/* 同意协议 */
	const checked = ref(false);
</script>

<style scoped lang="scss">
	.vip-ctn {
		width: 100%;
		position: relative;
		z-index: 0;
		background-color: #131121;
		background: url('https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/huiyuan-bg.png') no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: column;
	}

	.top {
		padding-top: 163rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			padding-top: 43rpx;
			margin-left: 13rpx;
		}

		.right {
			display: flex;
			justify-content: flex-end;

			.invite {
				width: 112rpx;
				height: 47rpx;
				background: #fdd0aa;
				border-radius: 24rpx;
				margin: 66rpx 8rpx 0 17rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #5a1400;
				line-height: 47rpx;
				text-align: center;
			}
		}
	}

	.invite-pop {
		width: 572rpx;
		height: 435rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 69rpx 68rpx;
		box-sizing: border-box;

		.title {
			font-weight: 600;
			font-size: 32rpx;
			color: #121212;
			text-align: center;
		}

		.input-ref {
			margin-top: 46rpx;
			width: 100%;
			height: 78rpx;
			background: #e8f3ff;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			padding: 0 35rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 24rpx;

			.holder {
				font-weight: 400;
				font-size: 24rpx;
				color: #959595;
			}
		}

		.buts {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 37rpx;
			margin-top: 58rpx;
		}
	}

	.vip-proj {
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 20rpx;
		padding-top: 20rpx;

		&__item {
			position: relative;
			width: 332rpx;
			height: 206rpx;
			background: #2a2131;
			border-radius: 20rpx;
			flex-shrink: 0;
			border: 1rpx solid #523838;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.name {
				padding-top: 5rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #d19a88;
			}

			.price {
				font-family: DIN Alternate, DIN Alternate;
				font-weight: bold;
				font-size: 59rpx;
				color: #fee6cb;
				margin-top: 9rpx;

				.flag {
					font-size: 32rpx;
					color: #fee6cb;
				}
			}

			.origin {
				font-weight: 400;
				font-size: 26rpx;
				color: #d19a88;
				text-decoration: line-through;
			}
		}

		&__flag {
			position: absolute;
			top: -19rpx;
			right: -1rpx;
			padding: 0rpx 14rpx;
			height: 44rpx;
			background: #543739;
			border-radius: 0rpx 19rpx 0rpx 19rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #d19a88;

			.num {
				font-weight: 500;
			}
		}

		&__flag-act {
			background: linear-gradient(90deg, #ffe5ce 0%, #fdcfa9 100%);
			color: #5a1400;
		}

		.item-active {
			border: 2rpx solid #fecda2;
		}
	}

	.fixed-bottom {
		width: 100%;
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx 30rpx 0 0;

		.agree {
			font-weight: 400;
			font-size: 22rpx;
			color: #a1a1a1;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.privacy {
				color: #f26631;
			}
		}

		.price {
			background: url('https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/pay-all-bg.png') no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 86rpx;
			margin-top: 13rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				padding-left: 65rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;

				.flag {
					font-family: DIN Alternate, DIN Alternate;
					font-weight: bold;
					font-size: 32rpx;
					color: #621b02;
					margin-bottom: 6rpx;
				}

				.num {
					font-family: DIN Alternate, DIN Alternate;
					font-weight: bold;
					font-size: 59rpx;
					color: #621b02;
					line-height: 69rpx;
				}

				.unit {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #621b02;
					margin-bottom: 10rpx;
				}

				.origin {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #d19a88;
					text-decoration-line: line-through;
					margin-bottom: 12rpx;
					margin-left: 15rpx;
				}
			}

			.right {
				width: 269.5rpx;
				height: 86rpx;
				font-weight: 600;
				font-size: 34rpx;
				color: #ffc99f;
				line-height: 86rpx;
				text-align: center;
				background: url('https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/pay-right-bg.png') no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>